<template name="addProjectModal">
    	<!-- Add Water Project Modal -->
      <div class="modal fade" id="addWaterProjectModal" tabindex="-1" role="dialog" aria-labelledby="addWaterProjectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 class="modal-title" id="addWaterModalLabel"> Add a New Water Project</h3>
            </div>
            <div class="modal-body">
              <form role="form" class="form-addwaterproject">
                <input id="project-title" type="text" autofocus="" required placeholder="water project name" class="form-control input-lg"><br/>
                <div class="input-group">
                <input id="project-coordinates" type="text" class="form-control input-lg" placeholder="Latitude, Longitude (e.g. 34.1, 84.5)">
                <span class="input-group-btn">
                  <button id="geolocate-button" class="btn btn-default btn-lg" data-toggle="tooltip" title="Click to autofill location." type="button"><span class="glyphicon glyphicon-map-marker"> </span></button>
                </span>
                </div><!-- /input-group --><br/>
                <textarea id="project-description" placeholder="description" class="form-control input-lg"></textarea><br/>
                {{> loadTags}}
                <button type="submit" class="btn btn-default btn-lg btn-block">submit</button>
              </form>
            </div>
          </div>
        </div>
      </div> <!-- addWaterProjectModal -->
</template>

<template name="loadTags">
  <select id="project-tag" class="form-control input-lg" placeholder="Select tag">
  <option value="Select Tag">How would you classify?</option>
  {{#each tags}}
    <option value="{{name}}">{{name}}</option>
  {{/each}}
  </select><br/>
</template>